<template>
  <div class="dashboard">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <template #header>
            <div class="card-header">
              <span><i class="el-icon-s-flag"></i> 进行中项目</span>
              <el-tag type="warning">{{ activeProjects }}个</el-tag>
            </div>
          </template>
          <div class="card-content">
            <div class="stat-number">{{ activeProjects }}</div>
            <el-progress :percentage="70" :format="format" />
            <div class="stat-change up">
              <i class="el-icon-top"></i> 较上周增长12%
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <template #header>
            <div class="card-header">
              <span><i class="el-icon-tickets"></i> 待处理任务</span>
              <el-tag type="danger">{{ pendingTasks }}个</el-tag>
            </div>
          </template>
          <div class="card-content">
            <div class="stat-number">{{ pendingTasks }}</div>
            <el-progress :percentage="30" :format="format" status="exception" />
            <div class="stat-change down">
              <i class="el-icon-bottom"></i> 较上周下降5%
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <template #header>
            <div class="card-header">
              <span><i class="el-icon-user"></i> 团队成员</span>
              <el-tag type="success">{{ teamMembers }}人</el-tag>
            </div>
          </template>
          <div class="card-content">
            <div class="stat-number">{{ teamMembers }}</div>
            <el-progress :percentage="100" :format="format" status="success" />
            <div class="stat-change up">
              <i class="el-icon-top"></i> 较上月增长2人
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <template #header>
            <div class="card-header">
              <span><i class="el-icon-s-data"></i> 完成率</span>
              <el-tag type="info">{{ completionRate }}%</el-tag>
            </div>
          </template>
          <div class="card-content">
            <div class="stat-number">{{ completionRate }}%</div>
            <el-progress :percentage="completionRate" :format="format" />
            <div class="stat-change up">
              <i class="el-icon-top"></i> 较上月提升3%
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 项目进度和近期任务 -->
    <el-row :gutter="20" class="mt-20">
      <el-col :span="16">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header between">
              <span>项目进度</span>
              <el-button type="text" @click="navigateToProjects">查看全部</el-button>
            </div>
          </template>
          <div class="project-list">
            <div v-for="project in projects" :key="project.id" class="project-item">
              <div class="project-info">
                <h4>{{ project.name }}</h4>
                <p>{{ project.description }}</p>
              </div>
              <div class="project-progress">
                <el-progress 
                  :percentage="project.progress" 
                  :status="getProgressStatus(project.progress)" 
                  :stroke-width="10"
                />
                <div class="project-meta">
                  <span><i class="el-icon-user"></i> {{ project.manager }}</span>
                  <span><i class="el-icon-time"></i> {{ project.deadline }}</span>
                  <el-button type="primary" size="small" @click="viewProjectDetail(project.id)">详情</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" class="tasks-card">
          <template #header>
            <div class="card-header between">
              <span>最近任务</span>
              <el-button type="text" @click="navigateToTasks">查看全部</el-button>
            </div>
          </template>
          <el-timeline>
            <el-timeline-item
              v-for="task in recentTasks"
              :key="task.id"
              :type="task.type"
              :timestamp="task.time"
              :color="getTimelineColor(task.type)"
            >
              <div class="timeline-content">
                <div class="task-title">{{ task.content }}</div>
                <div class="task-meta">
                  <span>{{ task.project }}</span>
                  <el-tag size="small" :type="task.status === 'completed' ? 'success' : 'warning'">
                    {{ task.status === 'completed' ? '已完成' : '进行中' }}
                  </el-tag>
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>

    <!-- 项目统计和团队活动 -->
    <el-row :gutter="20" class="mt-20">
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>项目类型分布</span>
            </div>
          </template>
          <div class="chart-container">
            <div class="chart-placeholder">
              <!-- 这里可以添加echarts等图表组件 -->
              <div class="chart-data">
                <div class="chart-item">
                  <div class="color-dot" style="background-color: #409EFF;"></div>
                  <span>变电站工程</span>
                  <span>45%</span>
                </div>
                <div class="chart-item">
                  <div class="color-dot" style="background-color: #67C23A;"></div>
                  <span>配电室改造</span>
                  <span>30%</span>
                </div>
                <div class="chart-item">
                  <div class="color-dot" style="background-color: #E6A23C;"></div>
                  <span>电气线路</span>
                  <span>15%</span>
                </div>
                <div class="chart-item">
                  <div class="color-dot" style="background-color: #F56C6C;"></div>
                  <span>其他项目</span>
                  <span>10%</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>团队活动</span>
            </div>
          </template>
          <div class="team-activities">
            <div v-for="(activity, index) in teamActivities" :key="index" class="activity-item">
              <el-avatar :size="40" :src="activity.avatar"></el-avatar>
              <div class="activity-content">
                <div class="activity-header">
                  <span class="activity-user">{{ activity.user }}</span>
                  <span class="activity-time">{{ activity.time }}</span>
                </div>
                <div class="activity-text">{{ activity.action }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const format = (percentage) => `${percentage}%`;

// 统计数据
const activeProjects = ref(5);
const pendingTasks = ref(12);
const teamMembers = ref(8);
const completionRate = ref(65);

// 项目列表
const projects = [
  {
    id: 1,
    name: '变电站电气安装工程',
    description: '完成主变压器安装和调试',
    progress: 75,
    status: 'success',
    manager: '张三',
    deadline: '2024-03-15'
  },
  {
    id: 2,
    name: '配电室改造项目',
    description: '更新配电柜和控制系统',
    progress: 45,
    status: 'warning',
    manager: '李四',
    deadline: '2024-04-20'
  },
  {
    id: 3,
    name: '生产线电气升级',
    description: '自动化控制系统升级',
    progress: 30,
    status: 'exception',
    manager: '王五',
    deadline: '2024-05-10'
  }
];

// 最近任务
const recentTasks = [
  {
    id: 1,
    content: '完成主变压器安装验收',
    time: '2024-02-20 14:30',
    type: 'success',
    project: '变电站电气安装',
    status: 'completed'
  },
  {
    id: 2,
    content: '配电柜安装进度检查',
    time: '2024-02-20 10:00',
    type: 'warning',
    project: '配电室改造',
    status: 'in-progress'
  },
  {
    id: 3,
    content: '控制系统调试会议',
    time: '2024-02-19 16:00',
    type: 'primary',
    project: '生产线电气升级',
    status: 'in-progress'
  },
  {
    id: 4,
    content: '设备采购清单确认',
    time: '2024-02-18 09:30',
    type: 'info',
    project: '变电站电气安装',
    status: 'completed'
  }
];

// 团队活动
const teamActivities = [
  {
    user: '张三',
    action: '完成了"主变压器安装"任务',
    time: '2小时前',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
  },
  {
    user: '李四',
    action: '创建了新项目"低压配电箱改造"',
    time: '4小时前',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
  },
  {
    user: '王五',
    action: '更新了"控制系统调试"进度到75%',
    time: '昨天',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
  },
  {
    user: '赵六',
    action: '评论了"配电柜安装"任务',
    time: '2天前',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
  }
];

// 获取进度状态
const getProgressStatus = (progress) => {
  if (progress >= 80) return 'success';
  if (progress >= 50) return 'warning';
  return 'exception';
};

// 获取时间线颜色
const getTimelineColor = (type) => {
  const colors = {
    success: '#67C23A',
    warning: '#E6A23C',
    danger: '#F56C6C',
    primary: '#409EFF',
    info: '#909399'
  };
  return colors[type] || colors.primary;
};

// 导航函数
const navigateToProjects = () => {
  router.push('/projects');
};

const navigateToTasks = () => {
  router.push('/tasks');
};

const viewProjectDetail = (id) => {
  router.push(`/projects/${id}`);
};
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.stat-card {
  height: 100%;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.between {
  justify-content: space-between;
}

.card-content {
  margin-top: 10px;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #303133;
}

.stat-change {
  font-size: 12px;
  margin-top: 8px;
}

.up {
  color: #67C23A;
}

.down {
  color: #F56C6C;
}

.project-list {
  margin-top: 20px;
}

.project-item {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s;
}

.project-item:hover {
  background-color: #f0f2f5;
  transform: translateX(5px);
}

.project-info h4 {
  margin: 0 0 10px 0;
  color: #303133;
}

.project-info p {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.project-progress {
  margin-top: 15px;
}

.project-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  font-size: 13px;
  color: #606266;
}

.tasks-card {
  height: 100%;
}

.timeline-content {
  padding: 0 0 15px 0;
}

.task-title {
  font-weight: 500;
  margin-bottom: 5px;
}

.task-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #909399;
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.chart-data {
  padding: 20px;
}

.chart-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.chart-item span:first-of-type {
  margin-left: 10px;
  flex: 1;
}

.color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.team-activities {
  padding: 5px 0;
}

.activity-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-content {
  margin-left: 15px;
  flex: 1;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.activity-user {
  font-weight: 500;
}

.activity-time {
  font-size: 12px;
  color: #909399;
}

.activity-text {
  color: #606266;
  font-size: 14px;
}
</style> 